<template>
  <div class="Information">
    <div class="Information_top">
      <h3>
        <div></div>专业招生计划
      </h3>
      <div>
        <el-dropdown @command="handleBatch">
          <span class="el-dropdown-link">
<<<<<<< HEAD
            {{Gender.batchName}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for=" (item , index) in suitableBatch"
              :key="index"
              :command="item"
            >{{item.batchName}}</el-dropdown-item>
=======
            {{batch == "0"?"本科批" : "专科批" }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="0">本科批</el-dropdown-item>
            <el-dropdown-item command="4">专科批</el-dropdown-item>
>>>>>>> 314b442cce11d658746227581b0160373004c345
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown @command="handleGrade">
          <span class="el-dropdown-link">
            {{ grade == "1" ? "理科" : "文科" }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">理科</el-dropdown-item>
            <el-dropdown-item command="0">文科</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
<<<<<<< HEAD
    <span v-if="recruitPlan.list.length > 0">
      <router-link
        :to="{
      path : '/MajorDeatil',
      query:{
        majorId:list.majorAllId
      },
      
     
    }"
        class="list"
        v-for="(list , index)  in recruitPlan.list"
        :key="list.id"
        tag="div"
      >
        <h3>
          <span>{{list.majIntroduce}}</span>
          <i class="el-icon-arrow-right"></i>
        </h3>
        <div class="list_bottom">
          <div>
            {{list.year}}年招生
            <span>{{list.planNum}}</span>
            人
          </div>
          <div>
            {{list.year}}学制
            <span>{{list.schoolYear}}</span>
            年
          </div>
          <div>
            {{list.year}}学费
            <span>{{list.cost}}</span>
            元
          </div>
        </div>
      </router-link>
    </span>
    <span v-else>
      <div class="MajorDeatil_list">暂无学校</div>
    </span>
=======

    <router-link
      :to="{
      name : '/MajorDeatil',
      params:{
        majorId:list.majorAllId
      },
    }"
      class="list"
      v-for="(list , index)  in recruitPlan.list"
      :key="list.id"
      tag="div"
    >
      <h3>
        <span>{{list.majIntroduce}}</span>
        <i class="el-icon-arrow-right"></i>
      </h3>
      <div class="list_bottom">
        <div>
          {{list.year}}年招生
          <span>{{list.planNum}}</span>
          人
        </div>
        <div>
          {{list.year}}学制
          <span>{{list.schoolYear}}</span>
          年
        </div>
        <div>
          {{list.year}}学费
          <span>{{list.cost}}</span>
          元
        </div>
      </div>
    </router-link>
>>>>>>> 314b442cce11d658746227581b0160373004c345
  </div>
</template>

<script>
export default {
  name: "Information",
  data() {
    return {
      pageSize: 10,
      pageNow: 1,
      batch: 1,
      grade: 1,
<<<<<<< HEAD
      recruitPlan: "",
      suitableBatch: "",
      Gender: ""
=======
      recruitPlan: ""
>>>>>>> 314b442cce11d658746227581b0160373004c345
    };
  },
  methods: {
    getInformation() {
      this.$ajax({
        method: "POST",
        url: "/api/university/recruitPlan/" + this.$route.params.userId,
        data: {
          grade: this.grade,
<<<<<<< HEAD
          batch: this.Gender.id,
=======
          batch: this.batch,
>>>>>>> 314b442cce11d658746227581b0160373004c345
          pageSize: this.pageSize,
          pageNow: this.pageNow
        },

        success: res => {
          if (res.data.code == 0) {
            this.recruitPlan = res.data.data;
          }
        }
      });
    },
    handleBatch(Batch) {
<<<<<<< HEAD
      this.Gender = Batch;
=======
      this.batch = Batch;
>>>>>>> 314b442cce11d658746227581b0160373004c345
      this.getInformation();
    },
    handleGrade(Grade) {
      this.grade = Grade;
      this.getInformation();
<<<<<<< HEAD
    },
    getBatch() {
      this.$ajax({
        method: "POST",
        url: "/api/voluntary/targetBatch",

        success: res => {
          if (res.data.code == 0) {
            this.Gender = res.data.data.suitableBatch[0];

            this.suitableBatch = res.data.data.suitableBatch;
            this.getInformation();
          }
        }
      });
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
    }
  },
  beforeCreate() {
    this.$nextTick(() => {
<<<<<<< HEAD
      this.getBatch();
=======
      this.getInformation();
>>>>>>> 314b442cce11d658746227581b0160373004c345
    });
  }
};
</script>>

<style lang="scss">
.Information {
  padding: 46px 66px;
  background: #ffffff;
  border-radius: 10px;
  margin-bottom: 112px;
  padding-bottom: 76px;
  .Information_top {
    display: flex;
    justify-content: space-between;
    > h3 {
      display: flex;
      padding-bottom: 24px;
      font-size: 14px;
      div {
        background: #2e86ff;
        height: 16px;
        width: 6px;
        border-radius: 2px;
        margin-right: 14px;
        position: relative;
        top: -2px;
      }
    }
    > div {
    }
    .el-dropdown {
      margin-left: 36px;
    }
    .el-icon--right {
      margin-left: 20px;
    }
  }
  .list {
    padding: 28px 46px;
    background: #f8f8f8;
    border-radius: 10px;
    margin-bottom: 10px;

    h3 {
      display: flex;
      justify-content: space-between;
<<<<<<< HEAD

      span {
        padding-right: 20px;
      }
      i {
        color: #d5d5d5;
=======
      
      span{
        padding-right:20px; 
      }
      i {
        color: #d5d5d5;
       
>>>>>>> 314b442cce11d658746227581b0160373004c345
      }
    }

    .list_bottom {
      display: flex;
      margin-top: 18px;
      color: #888888;
      font-size: 10px;
      span {
        color: #181616;
      }
      > div {
        margin-right: 20px;
      }
    }
  }
<<<<<<< HEAD
  .MajorDeatil_list {
    padding: 20px 0;
    text-align: center;
  }
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
}
</style>